Descripción de la actividad
Las fuentes y código de colores a utilizar
Qué información se desplegará en cada sección de la página
Qué distribución de los contenidos (columnas) desea para cada pantalla
Las fuentes y código de colores a utilizar
Qué información se desplegará en cada sección de la página
Qué distribución de los contenidos (columnas) desea para cada pantalla
Realizar el prototipo (wireframe) en Figma
Hablo con mi cliente y le pregunto dudas...
Desarrollo de estructura en Visual Code
Desarrollo de estilos en Visual Code
Publicar regularmente los archivos en el servidor
Recibir feedback del cliente y realizar cambios. Conceptos a tener en cuenta:
Legibilidad: Jerarquía tipográfica: Especificar la importancia de cada párrafo: h1, h2, h3, p, li. ¿Disponemos de ellos? ¿Puedo localizar correctamente cada bloque de contenido?
Legibilidad: Tratamiento del color ¿Hay colores que destacan mucho por encima de otros?¿Percibo algunos de ellos de manera poco armónica? Buscamos armonía. Pueden ser complementarios, análogos, dos o tres colores...: Jerarquía tipográfica: Especificar la importancia de cada párrafo: h1, h2, h3, p, li. ¿Disponemos de ellos? ¿Puedo localizar correctamente cada bloque de contenido?
Usabilidad: Acceso a los enlaces de navegación. ¿Son visibles y percibibles como elementos de navegación? ¿Tengo suficiente espacio para clicar?¿Tengo navgación para movil y escritorio?: Jerarquía tipográfica: Especificar la importancia de cada párrafo: h1, h2, h3, p, li. ¿Disponemos de ellos? ¿Puedo localizar correctamente cada bloque de contenido?
Accesibilidad: texto alternativo en las imágenes ¿Tengo texto alternativo?
Legibilidad: Resaltado de elementos de la interfície. Color del texto respecto al color del fondo. Relación figura-fondo. ¿Utilizo correctamente los colores e imágenes de fondo para que resulte legible el contenido?
Longitud de los párrafos ¿Son demasiado largos? ¿Resulta legible?
Legibilidad: Alineación de bloques ¿Se percibe correctamente cada bloque de contenido con los del mismo bloque?
Legibilidad: Peso de cada bloque de contenido ¿Están bién colocados?¿Los percibo con la importancia que yo quiero que tengan?
Legibilidad: Tratamiento del texto (font-size: 2em, font-family: arial, color: blue, text-align: center, line-height: 1, word-spacing:4px, font-style:italic, text-transform:uppercase, font-weight: bold)
Usabilidad: El diseño que funciona mejor es el más sencillo. Complicamos la estructura a partir de nuestras necesidades
Utilizaremos el sistema de columnas que nos ofrece Bootstrap
Tiene que desplegarse de forma responsive
Debemos proporcionar a nuestro desarrollador/a un prototipo de la página (wireframe, mockup...)
Texto: Proporcionados en el archivo adjunto Mockup Landing Sselective.docx
Imágenes: Las podemos conseguir de bancos de imágenes gratuitos
Iconos: Podemos obtenerlos desde Figma
Durante la maquetación del landing page, realicé las siguientes tareas cumpliendo con los principios de legibilidad, accesibilidad y usabilidad:
Jerarquía tipográfica: Utilicé las etiquetas h1, h2, h3, p y li de acuerdo con la lógica del contenido. Esto permite una estructura clara y facilita la comprensión para el usuario.
Adaptabilidad: Maqueté la página para que se visualice correctamente tanto en escritorio como en dispositivos móviles. Los elementos se reorganizan según el ancho de pantalla y la navegación sigue siendo accesible.
Legibilidad y color: Aseguré buen contraste entre el texto y el fondo, elegí un tamaño de fuente adecuado y configuré los márgenes y espaciado para que el contenido se lea de forma cómoda y armoniosa.